<div class="main">
  <div class="top-title">上午好，xxxx公司</div>
  <el-row :gutter="30" style="margin-bottom: 20px;">
    <el-col :span="8">
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item, index) in deviceList" :key="index">
          <div class="col-item">
            <div class="one" style="background: #61a5e8">
              互联网设备（20台）
            </div>
            <div>234</div>
            <div class="three">
              <span>环比</span>
              <span><i class="el-icon-caret-bottom" style="color: #7ecf51"></i>12%</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="16">
      <div class="echart-item">
        <div class="echart-item-title">近期生产量分析</div>
        <div ref="echartDiv1" style="width: 100%; height:320px"></div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="30" style="margin-bottom: 20px;">
    <el-col :span="8">
      <div class="echart-item">
        <div class="echart-item-title">投入品统计分析</div>
        <div style="width: 100%; height:230px" ref="echartDiv2_1"></div>
        <div style="text-align: center">
          <el-radio-group v-model="channel" style="margin-bottom: 10px;">
            <el-radio-button label="0">2017</el-radio-button>
            <el-radio-button label="1">2018</el-radio-button>
            <el-radio-button label="2">今年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="echart-item">
        <div class="echart-item-title">地块面积占比</div>
        <div style="width: 100%; height:270px" ref="echartDiv2_2"></div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="echart-item">
        <div class="echart-item-title">各品种种植面积</div>
        <div style="width: 100%; height:270px" ref="echartDiv2_3"></div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="30" style="margin-bottom: 20px;">
    <el-col :span="8">
      <div class="echart-item">
        <div class="echart-item-title">员工完成任务数量</div>
        <div style="width: 100%; height:360px" ref="echartDiv3_1"></div>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="echart-item">
        <div class="echart-item-title">农事操作数量</div>
        <div style="text-align: center">
          <el-radio-group v-model="channel" style="margin-right: 10px;">
            <el-radio-button label="0">今年</el-radio-button>
            <el-radio-button label="1">本周</el-radio-button>
            <el-radio-button label="2">本月</el-radio-button>
          </el-radio-group>
          <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" style="vertical-align: middle;">
          </el-date-picker>
        </div>
        <div style="width: 100%; height:320px" ref="echartDiv3_2"></div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="30" style="margin-bottom: 20px;">
    <el-col :span="12">
      <div class="echart-item">
        <div class="echart-item-title">用户查看排名</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="sub-title">查看用户数</div>
            <div class="space-between">
              <span style="font-size: 20px;">8848</span>
              <span style="color:#999">17%</span>
            </div>
            <div style="width: 100%; height:120px" ref="echartDiv4_1"></div>
          </el-col>
          <el-col :span="12">
            <div class="sub-title">人均查看次数</div>
            <div class="space-between">
              <span style="font-size: 20px;">8848</span>
              <span style="color:#999">17%</span>
            </div>
            <div style="width: 100%; height:120px" ref="echartDiv4_2"></div>
          </el-col>
        </el-row>
        <div>
          <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'field4', order: 'descending'}">
            <el-table-column prop="field1" label="排名"></el-table-column>
            <el-table-column prop="field2" label="流通批次名称" width="180"></el-table-column>
            <el-table-column prop="field3" label="查看数"></el-table-column>
            <el-table-column prop="field4" label="周涨幅" sortable></el-table-column>
          </el-table>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="echart-item">
        <div class="echart-item-title">流通额类别占比</div>
        <el-radio-group v-model="channel" style="margin-bottom: 10px;">
          <el-radio-button label="0">全部渠道</el-radio-button>
          <el-radio-button label="1">线上</el-radio-button>
          <el-radio-button label="2">线下</el-radio-button>
        </el-radio-group>
        <div class="sub-title">流通金额</div>
        <el-row :gutter="20">
          <el-col :span="10">
            <div style="width: 100%; height:200px" ref="echartDiv4_3"></div>
          </el-col>
          <el-col :span="14">
            <el-table :data="tableData2" style="width: 100%" class="displayNone">
              <el-table-column prop="field1"></el-table-column>
              <el-table-column prop="field2" width="180"></el-table-column>
              <el-table-column prop="field3"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</div>